<template>
	<view class="sticky zIndex99" style="top: 0rpx; background: var(--fff)">
		<upper />

		<u-gap height="10rpx"></u-gap>
		<view class="selects flex wrap">
			<view :class="{ active: selectActive === -1 }" @click="handleSelectActive(-1)">
				最新上架
			</view>
			<view
				v-for="(item, index) in selects.slice(0, showMore ? selects.length : 8)"
				:key="index"
				:class="{ active: selectActive === index }"
				@click="handleSelectActive(index)">
				{{ item.name }}
			</view>
		</view>

		<image
			v-if="selects.length > 8"
			class="arrowDown"
			src="https://aph.junhecms.com/image/homePage/24.png"
			:style="{ transform: `rotate(${showMore ? 180 : 0}deg)` }"
			@click="showMore = !showMore" />
	</view>

	<view class="dotData" v-if="booksList.length <= 0">数据为空</view>

	<view class="main flex wrap space-between">
		<view class="main-item" v-for="item in booksList" :key="item.id">
			<image mode="aspectFill" :src="baseUrl + item.image" />
			<view class="main-item-title">{{ item.title }}</view>
			<view class="main-item-more" @click="viewMore(item.id)">查看更多</view>
		</view>
	</view>
	<footerTips></footerTips>
	<u-gap height="30rpx"></u-gap>
	<share :isCustom="true" />
	<tabbar :value="2" />
</template>

<script setup>
import { ref } from 'vue';
import { post } from '@/utils/collect.js';
import { pageJump, baseUrl } from '@/utils/tool.js';
import upper from '@/components/upper';
import footerTips from '@/components/footerTips/footerTips.vue';
uni.setStorageSync('navTitle', '行业洞察');

const selects = ref([]);
const selectActive = ref(-1);

const showMore = ref(false);
const cid = ref(undefined);

// 切换类型
const handleSelectActive = (index) => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 0
	});

	selectActive.value = index;
	if (index === -1) cid.value = undefined;
	else cid.value = selects.value[index].id;
	_books();
};

const _bookcat = () => {
	post('/index/bookcat').then((res) => {
		selects.value = res.data;
	});
};
_bookcat();

// 列表
const booksList = ref([]);
const _books = () => {
	post('/index/books', { cid: cid.value }).then((res) => {
		booksList.value = res.data;
	});
};
_books();

const viewMore = (id) => {
	uni.navigateTo({
		url: '/homePage/professionInfo/index' + `?id=${id}`
	});
};
</script>

<style scoped lang="scss">
.main {
	padding: 0rpx 30rpx;
	&-item {
		width: 335rpx;
		margin-top: 20rpx;
		height: 672rpx;
		border: 1rpx solid #efefef;
		background: #f5f5f5;
		&-more {
			width: 144rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid var(--mainColor);
			color: var(--mainColor);

			font-weight: bold;
			font-size: 26rpx;
			color: #d93954;
			margin-left: 10rpx;
			margin-top: 15rpx;
		}
		&-title {
			font-weight: 500;
			font-size: 30rpx;
			color: #2d2d2d;
			padding: 20rpx 10rpx 0rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2; /* 显示的行数 */
		}
		image {
			width: 335rpx;
			height: 471.52rpx;
		}
	}
}
</style>
